<template>
  <!--首页-->

  <div
    class=""
    style=" min-height: 100vh ; padding: 40rpx ; background: #f6f7f8 "
  >
    <div
      style="width: 100% ;"
    >
      <button
        class="cu-btn bg-green shadow"
        @click="loadModal"
      >
        小程序原生富文本
      </button>
    </div>
    <div
      style="width: 100% ;margin-top: 20rpx"
    >
      <button
        class="cu-btn bg-green shadow"
        @tap="modal_show = true"
      >
        弹框展示
      </button>
    </div>
    <view
      v-if="load_modal"
      class="load-modal"
    >
      <image
        class="logo"
        src="/static/loading.png"
        mode="aspectFill"
      >
        <view class="gray-text">
          加载中...
        </view>
      </image>
    </view>
    <div class="row">
      <div class="name">
        时间选择
      </div>
      <date-picker
        placeholder="点击选择时间"
        :start="start_current_time"
        text-align="right"
        fields="4,5,6"
        title="选择时间"
        :default-value="default_start"
        class="date-picker"
        @change="changeStartTimePicker"
      />
    </div>
    <div class="row">
      <div class="name">
        多项下拉选择
      </div>
      <picker
        placeholder="请选择分类"
        text-align="right"
        :datas="classification_list"
        :level="2"
        title="选择分类"
        :default-value="category"
        @change="changeClassification"
      />
    </div>
    <div class="row">
      <div class="name">
        下拉选择
      </div>
      <pick
        :datas="pick_list"
        placeholder="不设置"
        default-value="0"
        @change="marginChange"
      />
    </div>
    <div class="row">
      <div class="name">
        下拉选择
      </div>
      <radio
        :default-value="false"
        @change="changeRadio"
      />
    </div>
    <div class="title">
      小程序 iconfont 展示
    </div>
    <div style="background-color: #f7f7f7">
      <span
        class="iconfont iconicon_paim"
        style="color: red"
      />
      <span class="iconfont iconicon_wdzb1" />
      <span class="iconfont iconicon_wdzl" />
      <span class="iconfont iconicon_wdkj" />
      <span class="iconfont iconpintuan1-01beifen" />
      <span class="iconfont iconicon_wenzbeifen" />
      <span class="iconfont iconicon_fx" />
      <span class="iconfont iconicon_wdcjbeifen" />
      <span class="iconfont iconicon_scbeifen" />
    </div>
    <div
      class="html"
      v-html="content_html"
    />
    <modal
      v-if="modal_show"
      :desc="modal_desc"
      :title="modal_title"
      :btn-text="modal_btn_text"
      :modal-type="modal_type"
      @cancel="modal_show = false"
      @define="ChooseModal"
    />
  </div>
</template>

<script>
import DatePicker from "@/components/DatePicker";
import Picker from "@/components/Picker";
import moment from "@/utils/moment.min";
import Pick from "@/components/Pick";
import Radio from "@/components/Radio";
import Modal from "@/components/Modal";
import {formatRichText} from "@/utils/common";
export default {
	name: "Index",
	components:{
		Pick,
		DatePicker,
		Picker,
		Radio,
		Modal
	},
	props:[],
	data() {
		return {
			load_modal: false,
			html_content: "",
			start_current_time: moment()
				.set("date", moment().get("date"))
				.format("YYYY-MM-DD HH:mm:ss"),
			default_start:"",
			category: "",
			pick_list: ["2", "10", "30", "50", "100", "200", "500", "1000"],
			modal_desc:"这是第一条文本<br/> 这是第二条文本",
			modal_title:"提示框",
			modal_btn_text:"确定",
			modal_show:false,
			modal_type:"test",
			home_data:{},
			content_html:""
		};
	},
	onLoad () {
		// 当存在首页缓存的时候先载入首页缓存
		if (uni.getStorageSync("homeData")) {
			this.home_data = uni.getStorageSync("homeData");
		}
		this.init();
	},
	onShow(){
	  this.handleAllList()
		this.content_html = uni.getStorageSync("html");
		this.content_html = formatRichText(this.content_html);
	},
	methods: {
	  handleAllList(){
	    this.$api.userPortalStandardEdit().then((res) => {
	      console.log(res)
      })
    },
		async init () {
		  // 深拷贝演示
			const map = new Map();
			map.set("key", "value");
			map.set("ConardLi", "code秘密花园");

			const set = new Set();
			set.add("ConardLi");
			set.add("code秘密花园");

			const target = {
				field1: 1,
				field2: undefined,
				field3: {
					child: "child"
				},
				field4: [2, 4, 8],
				empty: null,
				map,
				set,
				bool: new Boolean(true),
				num: new Number(2),
				str: new String(2),
				symbol: Object(Symbol(1)),
				date: new Date(),
				reg: /\d+/,
				error: new Error(),
				func1: () => {
					console.log("code秘密花园");
				},
				func2 (a, b) {
					return a + b;
				}
			};
			console.log("target",target);
			let clone_obj = this.$clone(target);
			target.field3.child = "123";
			console.log("clone_obj",clone_obj);


			// 获取首页数据
			this.$api.userGetListByCon({
				id: "参数示例"
			}).then(res=>{

			}).catch(err=>{

			});
			// 判断后端返回状态码是否为正常
			if (res.code === 200000) {
				// 对首页数据进行缓存
				uni.setStorageSync("homeData", res.ret);
				// 对首页数据进行赋值或者替换
				this.home_data = res.ret;
			}

		},
		loadModal(e) {
			this.load_modal = true;
			setTimeout(() => {
				this.load_modal = false;
			}, 2000);
		},
		changeStartTimePicker(date) {
			console.log(date);
		},
		changeClassification(e) {
			console.log(e);
		},
		marginChange(e) {
			console.log(e);
		},
		changeRadio (e) {
			console.log(e);
		},
		ChooseModal(type){
			console.log(type);
		},
	},

};
</script>

<style scoped lang="scss">
.row{
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  height: 88rpx;
  margin: 10rpx 0;
  background-color: #fff;
  padding: 0 30rpx;
  border-radius: 22rpx;
}
.load-modal{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background: rgba(0,0,0,.7);
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  color: #fff;
  .logo{
    animation-name: rote;
    animation-duration: 3000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    width: 100rpx;
    height: 100rpx;
  }
  .gray-text{
    margin-top: 50rpx;
    font-size: 30rpx;
    font-family: PingFangSC, PingFangSC-Semibold;
    font-weight: 600;
    text-align: left;
  }
}
@keyframes rote {
  0%{
    transform: rotate(0deg);
  }
  100%{
    transform: rotate(360deg);
  }
}
</style>
